<style type="text/css">
    .tk-db {
        width: 250px;
        height: 289px;
        display: inline-block;
        float: left;
        margin-top: 1.8em;
    }
    .tk-map {
        text-align: center;
        width: 600px;
        display: inline-block;
        height: 289px;
        /* background-image: url("<?php echo res_url("img/indonesia map 800px.png"); ?>"); */
        background-size: 100%;
        clear: both;
        margin-top: 1.8em;
    }
</style>
<div class="tk-db">
    <div id="divreg">
        <div>
            Region :
        </div>
        <div>
            <select id="selreg" onChange="javascript:changeReg();">
                <option value=""></option>
                <?php
                foreach ($allReg as $reg) {
                    echo "<option value='" . $reg->code . "'>" . $reg->code . " : " . $reg->display_name . "</option>";
                }
                ?>
            </select>
        </div>
    </div>
    <div id="divprov">
        <div>
            Provinsi :
        </div>
        <div>
            <select id="selprov" onChange="javascript:changeProv();">
                <option value=""></option>
            </select>
            <button id="butprov" class="invisible" onClick="javascript: chooseLoc($('#selprov').val());">Pilih</button>
        </div>
    </div>
    <div id="divkab">
        <div>
            Kabupaten :
        </div>
        <div>
            <select id="selkab" onChange="javascript:changeKab();">
                <option value=""></option>
            </select>
            <button id="butkab" class="invisible" onClick="javascript: chooseLoc($('#selkab').val());">Pilih</button>
        </div>
    </div>
    <div id="divkec">
        <div>
            Kecamatan :
        </div>
        <div>
            <select id="selkec" onChange="javascript:changeKec();">
                <option value=""></option>
            </select>
            <button id="butkec" class="invisible" onClick="javascript: chooseLoc($('#selkec').val());">Pilih</button>
        </div>
    </div>
    <hr style="width: 80%;" />
    <div>
        <div>
            <div>
                Jarak dari :
            </div>
            <div>
                <select id="seldari" onChange="javascript:calcDistance();"></select>
            </div>
        </div>
        <div>
            <div>
                ke :
            </div>
            <div>
                <select id="selke" onChange="javascript:calcDistance();"></select>
            </div>
        </div>
        <div>
            Jarak (garis lurus) = <b>~</b><span id="spanjarak" style="font-weight: bold;">0</span> km
        </div>
    </div>
</div>
<div class="tk-map" style="margin-bottom: 2em;"><div id="map"></div></div>
<div>
    <table id="tk-tab">
        <thead>
            <tr>
                <th rowspan="2" style="width: 3em;">No.</th>
                <th colspan="2">Koordinat</th>
                <th rowspan="2" style="width: 20em;">Nama</th>
                <th rowspan="2" style="width: 32em;">Keterangan</th>
            </tr>
            <tr>
                <th style="width: 5em;">Lat</th>
                <th style="width: 5em;">Long</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">
                var map, overlay, dist_overlay;
                jQuery(document).ready(function() {
                    map = createMapExplorer("map");
                    var gmap = new OpenLayers.Layer.Google("Hybrid", {
                        sphericalMercator: true, // use gmap
                        type: google.maps.MapTypeId.HYBRID
                    });
                    map.addLayers([gmap]);
                    map.setBaseLayer(gmap);
                    overlay = new OpenLayers.Layer.Vector('Overlay', {
                        styleMap: new OpenLayers.StyleMap({
                            externalGraphic: '<?php echo res_url("img/marker.png"); ?>',
                            graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
                            title: '${tooltip}'
                        })
                    });
                    hloverlay = new OpenLayers.Layer.Vector('HL Overlay', {
                        styleMap: new OpenLayers.StyleMap({
                            externalGraphic: '<?php echo res_url("img/markerhl.png"); ?>',
                            graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
                            title: '${tooltip}'
                        })
                    });
                    map.addLayers([overlay, hloverlay]);
                    hloverlay.setVisibility(false);
                });

                function onFeatureSelect() {
                }

                function onFeatureUnselect() {

                }

</script>
<script type="text/javascript">
    function changeReg() {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url("service/getDataJSON/provbyreg"); ?>",
            data: {
                reg_code: $("#selreg").val()
            },
            dataType: "json",
            beforeSend: function(xhr) {
                $("#selprov").html("");
                $("#selprov").append("<option>");
            },
            success: function(data) {
                for (var i = 0; i < data.length; i++) {
                    $("#selprov").append("<option value='" + data[i].code + "'>" + data[i].display_name + "</option>");
                }
                changeProv();
            },
            error: function(xhr, status, error) {
            }
        });
    }
    function changeProv() {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url("service/getDataJSON/kabbyprov"); ?>",
            data: {
                prov_code: $("#selprov").val()
            },
            dataType: "json",
            beforeSend: function(xhr) {
                $("#selkab").html("");
                $("#selkab").append("<option>");
            },
            success: function(data) {
                if ($("#selprov").val() !== "") {
                    $("#butprov").removeClass("invisible");
                } else {
                    $("#butprov").addClass("invisible");
                }
                for (var i = 0; i < data.length; i++) {
                    $("#selkab").append("<option value='" + data[i].code + "'>" + data[i].display_name + "</option>");
                }
                changeKab();
            },
            error: function(xhr, status, error) {
            }
        });
    }
    function changeKab() {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url("service/getDataJSON/kecbykab"); ?>",
            data: {
                kab_code: $("#selkab").val()
            },
            dataType: "json",
            beforeSend: function(xhr) {
                $("#selkec").html("");
                $("#selkec").append("<option>");
            },
            success: function(data) {
                if ($("#selkab").val() !== "") {
                    $("#butkab").removeClass("invisible");
                } else {
                    $("#butkab").addClass("invisible");
                }
                for (var i = 0; i < data.length; i++) {
                    $("#selkec").append("<option value='" + data[i].code + "'>" + data[i].display_name + "</option>");
                }
                changeKec();
            },
            error: function(xhr, status, error) {
            }
        });
    }
    function changeKec() {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url("service/getDataJSON/desabykec"); ?>",
            data: {
                kec_code: $("#selkec").val()
            },
            dataType: "json",
            beforeSend: function(xhr) {
                //$("#seldesa").html("");
                //$("#seldesa").append("<option>");
            },
            success: function(data) {
                if ($("#selkec").val() !== "") {
                    $("#butkec").removeClass("invisible");
                } else {
                    $("#butkec").addClass("invisible");
                }
                for (var i = 0; i < data.length; i++) {
                    //$("#seldesa").append("<option value='" + data[i].code + "'>" + data[i].display_name + "</option>");
                }
            },
            error: function(xhr, status, error) {
            }
        });
    }

    function chooseLoc(code) {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url("service/getDataJSON/locdet"); ?>",
            data: {
                kode: code
            },
            dataType: "json",
            beforeSend: function(xhr) {
            },
            success: function(data) {
                overlay.removeAllFeatures();
                if (data.level !== "PROV" && data.level !== "REG") { // point based 
                    // center & zoom
                    map.setCenter(new OpenLayers.LonLat(data.longlatitude, data.latitude).transform(
                            map.displayProjection,
                            map.projection), 14);
                } else { // area-based

                }
                // get locations
                $("#tk-tab tbody").html("");
                $("#seldari").html("");
                $("#selke").html("");
                for (var i = 0; i < data.locarr.length; i++) {
                    var locObj = data.locarr[i];
                    // sel
                    $("#seldari").append("<option value='" + locObj.id + "'>" + locObj.name + "</option>");
                    $("#selke").append("<option value='" + locObj.id + "'>" + locObj.name + "</option>");
                    // row
                    var rowHTML = "<tr id='row_" + locObj.id + "'>";
                    rowHTML += "<td style='text-align: right;'>" + (i + 1) + "</td>";
                    rowHTML += "<td class='det_lat'>" + locObj.latitude + "</td>";
                    rowHTML += "<td class='det_long'>" + locObj.longlatitude + "</td>";
                    rowHTML += "<td class='det_name'>" + "<a href='javascript:void(0);' onmouseover='javascript:hlLoc(" + locObj.id + ");' onmouseout='javascript:unhlLoc();'>" + locObj.name + "</a>" + "</td>";
                    rowHTML += "<td class='det_desc'>" + locObj.desc + "</td>";
                    rowHTML += "</tr>";
                    $("#tk-tab tbody").append(rowHTML);
                    // point
                    var koor = new OpenLayers.Geometry.Point(locObj.longlatitude, locObj.latitude)
                            .transform(map.displayProjection, map.projection);
                    overlay.addFeatures([
                        new OpenLayers.Feature.Vector(koor, {tooltip: locObj.name, data: locObj})
                    ]);
                }
                if (data.locarr.length > 0) {
                    map.zoomToExtent(overlay.getDataExtent(), true);
                    map.zoomOut();
                }
            },
            error: function(xhr, status, error) {
            }
        });
    }

    function calcDistance() {
        var idLoc1 = $("#seldari").val();
        var idLoc2 = $("#selke").val();
        var longLoc1 = $("#row_" + idLoc1 + " .det_long").html();
        var longLoc2 = $("#row_" + idLoc2 + " .det_long").html();
        var latLoc1 = $("#row_" + idLoc1 + " .det_lat").html();
        var latLoc2 = $("#row_" + idLoc2 + " .det_lat").html();
        var point1 = new OpenLayers.Geometry.Point(longLoc1, latLoc1)
                .transform(map.displayProjection, map.projection);
        var point2 = new OpenLayers.Geometry.Point(longLoc2, latLoc2)
                .transform(map.displayProjection, map.projection);
        //alert(latLoc1 + ", " + longLoc1 + " to " + latLoc2 + ", " + longLoc2);
        var line = new OpenLayers.Geometry.LineString([point1, point2]);
        $("#spanjarak").text((line.getGeodesicLength(map.projection) / 1000).toFixed(2));
    }

    function hlLoc(id) {
        hloverlay.removeAllFeatures();
        var long = $("#row_" + id + " .det_long").html();
        var lat = $("#row_" + id + " .det_lat").html();
        hloverlay.addFeatures([
            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(long, lat)
                    .transform(map.displayProjection, map.projection), {tooltip: ""})
        ]);
        hloverlay.setVisibility(true);
    }

    function unhlLoc() {
        hloverlay.removeAllFeatures();
        hloverlay.setVisibility(false);
    }
</script>